<template>
  <el-container class="ca-layout__root">
    <el-header class="ca-layout__header">Header</el-header>
    <el-container>
      <el-aside :class="[expand?'ca-layout__aside':'ca-layout__aside ca-aside-collapse']">
        <el-button class="ca-collapse-btn" @click="handleExpandBtnClick">{{
            expand ? 'collapse' : 'expand'
          }}
        </el-button>
        <div class="ca-sider-wrapper">
          <sider></sider>
        </div>
      </el-aside>
      <el-container>
        <el-main class="ca-layout__main">
          <router-view v-slot="{route,Component}" name="header">
            <transition
                :enter-active-class="`animate__animated ${route.meta.enterTransition}`">
              <component :is="Component"></component>
            </transition>
          </router-view>
          <router-view #default="{route,Component}">
            <transition :enter-active-class="`animate__animated ${route.meta.enterTransition}`">
              <component :is="Component"></component>
            </transition>
          </router-view>
          <router-view #default="{route,Component}" name="footer">
            <transition :enter-active-class="`animate__animated ${route.meta.enterTransition}`">
              <component :is="Component"></component>
            </transition>
          </router-view>
        </el-main>
        <el-footer class="ca-layout__footer">Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import 'animate.css';
import sider from './components/sider.vue'

const expand = ref<boolean>(true);
const handleExpandBtnClick = () => {
  expand.value = !expand.value;
}
</script>


<style scoped lang="scss">
@include block(layout) {
  @include elem(root) {
    height: 100vh;
  }
  @include elem(header) {
    background-color: red;
  }
  @include elem(aside) {
    width: 300px;
    background-color: blue;
    position: relative;
    overflow: visible;
    transition: width .5s ease-in-out;
    &.ca-aside-collapse {
      width: 0;

      .ca-collapse-btn {
        position: absolute;
        transform: translate(100%, 0);
      }
    }
    .ca-collapse-btn {
      position: absolute;
      right: 0;
    }
    .ca-sider-wrapper {
      position: relative;
      overflow: hidden;
      top: 40px;
    }
  }
  @include elem(main) {
    background-color: green;
  }
  @include elem(footer) {
    background-color: yellow;
  }
}


</style>